<template>
	<view class="content">
		<!-- 海报 -->
		<view class="danchuang-out" v-if="haibao" @tap="showHaibao()">
			<view class="haibao-inside">
				<image class="haibao-bg" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/invite_big%402x.png"></image>
				<image class="haibao-erweima" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/invite_erweima%402x.png"></image>
			</view>
		</view>

		<!-- 扫码 -->
		<view class="danchuang-out" v-if="saoma">
			<view class="saoma-inside">
				<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/invite_erweima%402x.png"></image>
				<view class="saoma-text">
					邀请好友扫描二维码
					加入优家圈领取礼包
				</view>
				<view class="saoma-close" @tap="showSaoma()">关闭</view>
			</view>
		</view>

		<!-- 微信分享 -->
		<view class="danchuang-out" v-if="wechat">
			<view class="wechat-inside">
				<view class="wechat-tittle">请选择分享平台</view>
				<view class="wechat-items">
					<view class="wechat-items-box">
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/invite_wechat_green%402x.png"></image>
						<view>微信好友</view>
					</view>
					<view class="wechat-items-box">
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/invite_friends-green%402x.png"></image>
						<view>朋友圈</view>
					</view>
				</view>
				<view class="wechat-close" @tap="showWechat()">取消</view>
			</view>
		</view>

		<!-- 页面 -->
		<view class="top">
			<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/inviteHead%402x.png"></image>
		</view>
		<view class="infos">
			<view class="infos-yellow-out">
				<view class="invite-id">邀请码：2398765</view>
				<view class="invite-copy">复制</view>
				<view class="infos-yellow-inside">
					<view class="infos-yellow-inside-boxs">
						<view class="infos-yellow-inside-boxs-num">310</view>
						<view class="infos-yellow-inside-boxs-text">获得收益(元)</view>
						<view class="infos-yellow-inside-boxs-btn" @tap="goDetail(1)">查看详情</view>
					</view>
					<view class="infos-yellow-inside-boxs">
						<view class="infos-yellow-inside-boxs-num">20</view>
						<view class="infos-yellow-inside-boxs-text">邀请人数(人)</view>
						<view class="infos-yellow-inside-boxs-btn" @tap="goDetail(2)">查看详情</view>
					</view>
				</view>
			</view>
			<view class="invite-now">
				<image class="invite-now-l" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/invite_dian%402x.png"></image>
				立即邀请
				<image class="invite-now-r" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/invite_dian%402x.png"></image>
			</view>
			<view class="invite-btns">
				<view class="invite-boxs" @tap="showHaibao()">
					<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/invite_haibao%402x.png"></image>
					<view>生成海报</view>
				</view>
				<view class="invite-boxs" @tap="showSaoma()">
					<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/invite_erweima_red%402x.png"></image>
					<view>扫码邀请</view>
				</view>
				<view class="invite-boxs" @tap="showWechat()">
					<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/invite_vx_red%402x.png"></image>
					<view>分享链接</view>
				</view>
			</view>
		</view>
		<view class="rule">
			<view class="rule-tittle">
				<image class="rule-tittle-l" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/invite_img%402x.png"></image>
				<view>邀请规则</view>
				<image class="rule-tittle-r" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/invite_img%402x.png"></image>
			</view>
			<view class="rule-text">
				1. 好友在进入优家圈时填写您的邀请码，即为邀请成功，邀请好友数量无上限；</br>
				2. 邀请成功后，您的好友每次在优家圈平台中产生消费，您都能获得一定的佣金收益；</br>
				3. 每个手机号码只能接受他人一次邀请，重复填写不同的邀请码无效，利用非常规手段进行恶意注册或者建立邀请关系的，将收回奖励；</br>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				haibao: false,
				saoma: false,
				wechat: false,
				type: '1'
			}
		},
		onLoad() {

		},
		methods: {
			showHaibao() {
				this.haibao = !this.haibao
			},
			showSaoma() {
				this.saoma = !this.saoma
			},
			showWechat() {
				this.wechat = !this.wechat
			},
			goDetail(type) {
				this.type = type
				uni.navigateTo({
					url: '../mine-invite-detail/mine-invite-detail?type='+this.type
				})
			}
		}
	}
</script>

<style>
	page {
		background: rgba(227, 67, 47, 1);
	}

	.content {
		width: 100%;
		height: 100%;
	}

	.top {
		width: 100%;
		height: 142px;
	}

	.top image {
		width: 100%;
		height: 142px;
	}

	.infos {
		margin: 0 17.5px;
		height: 322px;
		padding-top: 16px;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
	}

	.infos-yellow-out {
		margin: 0 17px;
		height: 165.5px;
		background: linear-gradient(0deg, rgba(243, 176, 66, 1) 0%, rgba(250, 225, 112, 1) 100%);
		border-radius: 5px;
		position: relative;
	}

	.invite-id {
		height: 19px;
		line-height: 19px;
		padding: 14px 0 0 22px;
		font-size: 20px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(112, 61, 60, 1);
	}

	.invite-copy {
		width: 67.5px;
		height: 26px;
		background: linear-gradient(270deg, rgba(211, 45, 41, 1) 0%, rgba(235, 90, 92, 1) 97%);
		border-radius: 13px;
		text-align: center;
		font-size: 14px;
		line-height: 26px;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		right: 21.5px;
		top: 12.5px;
	}

	.infos-yellow-inside {
		margin: 17.5px 22px 0 22px;
		height: 101.5px;
		background: rgba(241, 164, 67, 1);
		border-radius: 5px;
		display: flex;
	}

	.infos-yellow-inside-boxs {
		width: 50%;
		height: 101.5px;
	}

	.infos-yellow-inside-boxs-num {
		width: 100%;
		height: 16.5px;
		line-height: 16.5px;
		padding-top: 17px;
		text-align: center;
		font-size: 21px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(254, 254, 254, 1);
	}

	.infos-yellow-inside-boxs-text {
		width: 100%;
		height: 13px;
		padding-top: 9.5px;
		line-height: 13px;
		text-align: center;
		font-size: 12px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.infos-yellow-inside-boxs-btn {
		height: 26px;
		line-height: 26px;
		width: 70px;
		margin: 0 auto;
		font-size: 12px;
		margin-top: 8px;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		background: linear-gradient(270deg, rgba(211, 45, 41, 1) 0%, rgba(235, 90, 92, 1) 97%);
		border-radius: 13px;
	}

	.invite-now {
		width: 100%;
		padding-top: 15.5px;
		padding-bottom: 10.5px;
		height: 17px;
		line-height: 17px;
		text-align: center;
		font-size: 18px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(17, 17, 17, 1);
	}

	.invite-now image {
		width: 26px;
		height: 7px;
	}

	.invite-now-l {
		right: 15px;
	}

	.invite-now-r {
		left: 15px;
		-moz-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
	}

	.invite-btns {
		width: 100%;
		height: 113.5px;
		display: flex;
	}

	.invite-boxs {
		width: 33.3%;
		height: 100%;
		text-align: center;
	}

	.invite-boxs image {
		width: 71.5px;
		height: 71.5px;
	}

	.invite-boxs view {
		height: 12.5px;
		line-height: 12.5px;
		font-size: 13px;
		margin-top: -5px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.rule {
		margin: 15px 17.5px;
		height: 100%;
		background: rgba(255, 162, 0, 0.37);
		border-radius: 5px;
	}

	.rule-tittle {
		width: 100%;
		height: 41.5px;
		display: flex;
		justify-content: center;
	}

	.rule-tittle view {
		margin-top: 10.5px;
		height: 14.5px;
		line-height: 14.5px;
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.rule-tittle image {
		width: 14.5px;
		height: 7.5px;
		margin-top: 14.5px;
	}

	.rule-tittle-l {
		right: 5px;
	}

	.rule-tittle-r {
		left: 5px;
	}

	.rule-text {
		font-size: 12px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.8);
		line-height: 20px;
		padding: 0 17.75px 16.5px 17.75px;
	}

	.danchuang-out {
		width: 100%;
		height: 100%;
		position: fixed;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.haibao-inside {
		width: 326px;
		height: 552px;
		background: rgba(255, 255, 255, 1);
		display: flex;
		position: relative;
	}

	.haibao-bg {
		width: 306px;
		height: 532px;
		margin: 10px;
	}

	.haibao-erweima {
		position: absolute;
		width: 121px;
		height: 121px;
		z-index: 10;
		top: 298.5px;
		left: 102.5px;
	}

	.saoma-inside {
		width: 278px;
		height: 346.5px;
		background: rgba(255, 255, 255, 1);
		border-radius: 4px;
		position: absolute;
		text-align: center;
	}

	.saoma-inside image {
		width: 223px;
		height: 223px;
		margin-top: 15px;
		position: relative;
		margin-bottom: 12.5px;
	}

	.saoma-text {
		position: relative;
		width: 127.5px;
		height: 32.5px;
		line-height: 19px;
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(26, 26, 26, 1);
		margin: 0 auto;
	}

	.saoma-close {
		width: 100%;
		height: 42px;
		text-align: center;
		margin-top: 17px;
		line-height: 42px;
		border-top: 1px solid #E5E5E5;
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(26, 26, 26, 1);
	}

	.wechat-inside {
		width: 100%;
		height: 214px;
		position: fixed;
		bottom: 0px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 20px 20px 0px 0px;
	}

	.wechat-tittle {
		width: 100%;
		height: 15px;
		text-align: center;
		margin-top: 19px;
		margin-bottom: 41px;
	}

	.wechat-items {
		width: 100%;
		height: 90px;
		display: flex;
	}

	.wechat-items-box {
		width: 50%;
		height: 100%;
		text-align: center;
	}

	.wechat-items-box image {
		width: 50px;
		height: 50px;
	}

	.wechat-items-box view {
		height: 10px;
		font-size: 15px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.wechat-close {
		width: 100%;
		height: 49px;
		border-top: 1px solid #F5F5F5;
		text-align: center;
		line-height: 48px;
		font-size: 16px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(26, 26, 26, 1);
	}
</style>
